<template>
    <div class=" wrap-table user-p1">
        <div class="headerTop_ukl">
            <ul class="clearfix">
                <li>
                    <p class="p1"><img src="../../assets/images/icon_yanjiuduixiang.png" alt=""/><span>研究对象</span></p>
                    <p class="p3">{{userBasic.Surname}}({{userBasic.ResearchNo}})</p>
                </li>
                <li>
                    <p class="p1"><img src="../../assets/images/icon_ganyuzu.png" alt=""/>{{userBasic.GroupType |GroupType}}</p>
                    <p  class="p3" v-if="userBasic.Period!='3'"><span v-if="userBasic.GroupType==1">{{userBasic.IntensityOfIntervention |IntensityOfIntervention}}</span></p>
                    <p  class="p3" v-else><span v-if="userBasic.GroupType==1">{{userBasic.ChildIntensityOfIntervention |IntensityOfIntervention}}</span></p>
                </li>
                <li >
                    <p class="p1"><img src="../../assets/images/icon_huaiyunqi.png" alt=""/>{{userBasic.Period |Period}}</p>
                    <p class="p3"><span v-if="userBasic.Period==2">预产期：{{userBasic.ExpectedDate}},{{userBasic.PregnancyWeek}}</span></p>
                     <p class="p3"><span v-if="userBasic.Period==3">出生日期：{{userBasic.ChildBirthDate}},{{userBasic.ChildAge}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                      <p class="p3"><span v-if="userBasic.Period==4">出生日期：{{userBasic.ChildBirthDate}},{{getChildAge2(userBasic.ChildBirthDate)}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                </li>
            </ul>
        </div>
        <!---->
        <template>
            <el-table
                    :data="tableData"
                    border
                    v-loading="loading"
                    height="500"
                    element-loading-text="加载中"
                    style="width: 100%"
                    >
                <el-table-column
                        prop="a"
                        align="center"
                        label="内容类型"
                        min-width="120">
                    <template slot-scope="scope">
                        <span>生命树信使</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ArticleIndex"
                        label="内容编号"
                        align="center"
                        min-width="80">
                </el-table-column>
                <el-table-column
                        prop="ArticleTitle"
                        label="内容标题"
                        align="left"
                        header-align="center"
                        :show-overflow-tooltip="true"
                        min-width="300">
                    <template slot-scope="scope">
                        <span @click="watchContent(scope.row.ArticleContent)"
                              style="color:#409EFF;cursor: pointer">{{scope.row.ArticleTitle}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="Period"
                        align="center"
                        :formatter="PeriodFilter"
                        label="研究阶段"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="CreateTime"
                        align="center"
                        :formatter="CreateTimeFilter"
                        label="提醒日期"
                        min-width="200">
                </el-table-column>
                <el-table-column
                        prop="IsRead"
                        align="center"
                        label="阅读状态"
                        min-width="100">
                    <template  slot-scope="scope">
                        <span v-if="scope.row.IsRead==1">已读</span>
                        <span v-else style="color: red">未读</span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
                >
                   <div v-html="ArticleContent" style="max-height: 50vh;overflow-y: scroll"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!--分页-->
        <div class="block mg-20-auto">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageId"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>
<script>
import {mapGetters} from 'vuex'
import {getChildAge2} from '@/utils/index'
import {filterPeriod,filterIntensityOfIntervention} from '@/utils/localDic'
export default {
    name:'userP1',
    data() {
        return {
            tableData:[],
            pageId:1,
            total:null,
            loading:false,
            pageSize:10,
            dialogForm1:false,
            innerVisible:false,
            Period:'',
            maxHeight:'',
            topMAX:'5',
            itemType:'',
	        dialogVisible:false,
            ArticleContent:'',
            sysId:'',
            mobile:'',
            researchNo:'',
            userBasic:{
                Surname:'',
                ResearchNo:'',
                ExpectedDate:'',
                Period:'',
                IntensityOfIntervention:'',
                GroupType:''
            },
            changeVal:'2',
            FillInDate:'',
            PeriodFilter(row, column, cellValue, index){
                return filterPeriod(cellValue)
            },
            IsReadFilter(row, column, cellValue, index){
                return cellValue==1?'已读':'未读'
            },
            CreateTimeFilter:function(row, column, cellValue, index){
                if(Object.prototype.toString.call(cellValue)=='[object String]'){
                    return cellValue.substring(0,10)
                }
            },
            rowlist:[],

        }
    },
    components:{
       
    },
    props:{
        changeIndex:{
            type: String,
        }
    },
    beforeMount:function() {
        let that=this;
        let appHeight=$(window).height();
        let autoheight=(appHeight-300)+'px'
        that.maxHeight=autoheight
    },
    watch:{
        changeIndex:function(index){
            if(index=='9'){
                this.getList()
            }
        }
    },
    computed:{
        ...mapGetters([
                'resechObj',
            ]),
        LASTTIME:function(){
            let dateAlary=new Date(this.userBasic.ExpectedDate)
            return new Date(dateForm(dateAlary.setMonth(dateAlary.getMonth()-9,dateAlary.getDate()-7)))
        },
        yunzhou:function(){
            return parseInt((WeeksBetw(new Date,this.LASTTIME))/7)
        },
        yuntianshu:function(){
            return parseInt((WeeksBetw(new Date,this.LASTTIME))%7)
        },
        birthWeek(){
            return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))/7)    
        },
        birthDay(){
            return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))%7)
        }
    },
    created() {
        
    },
    methods: {
         getChildAge2(val){ //获取儿童期2年龄
            return val && getChildAge2(val)
        },
        handleSizeChange(val) {       //条数改变
            this.pageSize=val;
            this.getList()
        },
	    watchContent(val){
            this.dialogVisible=true
            this.ArticleContent=val
        },
        handleCurrentChange(val) {    //页数改变
            this.pageId = val
            this.getList()
        },
        handleSizeChange1(val) {       //条数改变11
            this.pageSize1=val;
            this.getList()
        },
        sortMethod:function(a,b){
        },
        getList:function(){           //获取一级信息列表
            let that=this
            that.userBasic=''
            if(that.resechObj.mobile ||that.resechObj.researchNo){
                that.sysId='';
                that.mobile=that.resechObj.mobile;
                that.researchNo=that.resechObj.researchNo;
            }
            that.service({
                url:'/ResearchObject/GetParticipantDetail',
                method:'get',
                params:{
                    itemType:'7',
                    sysId:'',
                    period:'',
                    researchObjectId:that.sysId,
                    mobile:that.mobile,
                    researchNo:that.researchNo,
                    pageCount:(that.pageId-1),
                    pageSize:that.pageSize,
                }}).then(response=>{
                	    console.log(response)
                        response.dtData.dtBasic[0]?that.userBasic=response.dtData.dtBasic[0]:''
                        that.tableData=response.dtData.dtArticle;
                        that.total=parseInt(response.dtData.dtArticle[0].TotalCount)
                }).catch(data=>{
            })
        },
    },
    mounted:function(){
        let that=this;
        that.sysId=that.$route.query.id;
        that.mobile=that.$route.query.mobile;
        that.researchNo=that.$route.query.researchNo;
        that.getList()
    },
    filters:{
        GroupType:function(val){
            if(val=='' ||val==undefined){
                return ''
            }
            return val=='1'?'A': 'B'
        },
        IntensityOfIntervention:function(val){
             return filterIntensityOfIntervention(val)
        },
        Period:function(val){
             return filterPeriod(val)
        },
        ChildSex(val){
            return val=='1'?'男':'女'
        }

    }
  }
function addZero(s){
    return s < 10 ? '0' + s: s;
}

function dateForm(data){   //日期格式化
    return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
}
function WeeksBetw(date1,date2) {  //计算日期之间相差得天数
    var _dt1=new Date(date1);
    var _dt2=new Date(date2);
    var dt1=_dt1.getTime();
    var dt2=_dt2.getTime();
    return parseInt(Math.abs(dt1- dt2)/1000/60/60/24);//这里是计算天数,如果想获得周数则在该返回值上再除以7
}

</script>
<style scoped lang="scss">
    .user-p1{
        .headerTop{
            margin-bottom: 30px;
            p{
                font-size:16px;
                margin-bottom: 15px;
                color:#303133;
                span{
                    padding:10px;
                }
                .span1{
                    margin-left: 25px;
                }}
            }
        .user-pi-ul{
            margin:0px auto 20px auto;
            li{
                float: left;
                width: 200px;
                margin-right: 20px;
            }
        }

    }
    .formX{
        .top{
            text-align: center;
        }
        ul{
            li{
                margin:20px;
                h3{
                    color: #606266;
                    font-weight: normal;
                }
                h5{
                    font-weight: normal;
                    margin:5px 0;
                }
                p{
                    color: #999999;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .headerTop_ukl{
        /*border:1px solid #EDF1F7;*/
        padding:5px 20px 10px 0px;
        min-width: 800px;
        width:1000px;
        font-size:14px;
    ul{
    li{
        float: left;
        margin-right: 50px;
    .p1{
        color:#999999;
        padding-bottom:5px;
        display: inline-block;
    img{
        display: inline-block;margin-right: 10px;
    };

    }
    .p3{
        display: inline-block;
        padding-left: 10px;
        color: #666;
    }
    }
    }
    }
    .redspan{color: #fff;width: 30px;height: 25px;background: red;display: inline-block;line-height: 25px;}
    .grespan{color: #fff;width: 30px;height: 25px;background:#009900;display: inline-block;line-height: 25px;}
    .twospan{color: #fff;width: 30px;height: 25px;background:#FC9804;display: inline-block;line-height: 25px;}
    .thrspan{color: #7A6266;width: 30px;height: 25px;background:#FFFF00;display: inline-block;line-height: 25px;}
    .fourspan{color: #fff;width: 30px;height: 25px;background:#92D050;display: inline-block;line-height: 25px;}
</style>

